<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

<div id="page" data-role="page" data-theme="b">
	<div data-role="header">
		<h1>Projects List</h1>
	</div>
    <div class="ui-grid-a">
			<div class="ui-block-a" style="width:30%;"><div class="ui-bar ui-bar	" style="height:120px">Block A</div></div>
			<div class="ui-block-b" style="width:70%;"><div data-role="content">	
		<ul data-role="listview" data-split-icon="arrow-r" data-theme="c">
			<li><a href="#page2">Project 1</a></li>
            <li><a href="#page3">Project 2</a></li>
			<li><a href="#page4">Page Four</a></li>
		</ul>		
	</div></div>
		</div><!-- /grid-a -->
        
	
	<div data-role="footer">
		<h4>Ozcrete Pools</h4>
	</div>
</div>

<div id="page2" data-role="page" data-theme="b">
	<div data-role="header">
		<h1>Page Two</h1>
	</div>
	<div data-role="content">	
		Content		
	</div>
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>

<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Page Three</h1>
	</div>
	<div data-role="content">	
		Content		
	</div>
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Page Four</h1>
	</div>
	<div data-role="content">	
		Content		
	</div>
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>

</body>
</html>